<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>

<body>
<!-- 宿主文件 -->
<div id="app">
    <h2 :title="title">
        <!-- 插值表达式！ -->
        {{title}}
    </h2>
    <!--    新增课程 -->
    <course-add v-model="course" @add-course="addCourse"></course-add>
    <!-- $event 表示传递出来的参数 -->
<!--    <course-add :value="course" @input="course=$event" @add-course="addCourse"></course-add>-->

    <!--    列表组件 -->
    <course-list :courses="courses"></course-list>

    <!--    商品总数-->
    <p>
        <!--        表达式-->
        <!--        课程总数：{{courses.length + ' 门'}}-->
        <!--        使用计算属性的功能对上面的代码进行改进！-->
        <!--        课程总数：{{total}}-->

        <!--        也可以用监听器实现上面的功能！ -->
        课程总数：{{totalCount}}
    </p>
</div>

<script src="../js/vue.js"></script>
<script>
    // 课程新增组件
    Vue.component('course-add', {
        props: ['value'],
        template:
            `
        <div>
<!-- 表单输入绑定 -->
            <input
             :value="value"
              @keydown.enter="addCourse"
              @input="onInput"
              />
                <!-- 事件处理 -->
            <button v-on:click="addCourse">新增课程</button>
            </div>
            `,
            methods: {
            addCourse() {
            // 发送自定义事件通知父组件
            // 注意事件名称定义时不要有大写字母出现
            this.$emit('add-course')
            },
            onInput(e) {
                this.$emit('input', e.target.value)
            }
            },
            })

      // 课程列表组件
            Vue.component('course-list', {
            data() {
            return {
            selectedCourse: '',
            }
            },
            props: {
            courses: {
            type: Array,
            default: []
            }
            },
            template: `
            <div>
                <!--    条件渲染-->
            <p v-if="courses.length == 0">没有任何课程信息！</p>

            <div class="course-list" v-else>
            <div
            :style="{backgroundColor: selectedCourse === c ? '#ddd' : 'transparent'}"
            @click="selectedCourse = c"
            v-for="c
            in courses"
            :key="c">
            <div>
            {{ c }}
            </div>
            </div>
            </div>
            </div>
            `
            })


            // 模拟异步数据调用
            function getCourses() {
            return new Promise(resolve => {
            setTimeout(() => {
            resolve(['web全栈', 'web高级'])
            }, 2000)
            })
            }

            // 1、创建Vue的实例
            const app = new Vue({
            el: "#app",
            data() {
            return {
            title: '开课吧，购物车!',
            course: '',
            courses: [],
            totalCount: 0
            }
            },
            methods: {
            addCourse() {
            // 1、添加course到数组
            this.courses.push(this.course)
            this.course = ''
            }
            },
            // 我们在写程序中用的比较多的两个钩子就是created and mounted
            async created() {
            // 进入这个生命周期函数：组件实例已创建，由于未挂载，dom不存在！
            const course = await getCourses()
            this.courses = course
            },
            mounted() { },
            computed: {
            total() {
            // 计算属性有缓存性：如果值没有发生变化，则页面不回重新渲染
            return this.courses.length + ' 门';
            }
            },
            // 默认情况下watch初始化时不执行
            // watch: {
            //     courses(newValue, oldValue) {
            //         this.totalCount = newValue.length + ' 门'
            //     }
            // },
            // 你如果想立马看到效果的话，就得用下面这个监听器！
            watch: {
            courses: {
            immediate: true,
            // deep: true,
            handler(newValue, oldValue) {
            this.totalCount = newValue.length + ' 门'
            }
            }
            },
            })
</script>
</body>

</html>
